// 按钮模式的选择器

<template>
    <van-popup v-model="visible"
               get-container="body"
               position="bottom">
        <div class="v-popup-picker-btn">
            <header v-if="title">
                <span>{{title}}</span>
                <van-icon name="cross"
                          @click.native.stop="fnColse()" />
            </header>

            <ul>
                <!-- 多选 -->
                <template v-if="multiple">
                    <li class="v-checkbox-li">
                        <h4 v-if="label">{{label}}</h4>
                        <div class="v-checkbox-content">
                            <template v-for="(item, index) in arr">
                                <span class="select-item"
                                      :class="{'active': check.some(code => code == item.code)}"
                                      @click.stop="fnCheckboxItem(item)"
                                      :key="index">{{item.name}}</span>
                            </template>
                        </div>
                    </li>
                </template>
                <!-- 多选 end -->

                <!-- 单选 -->
                <template v-else>
                    <li class="v-radio-li">
                        <h4 v-if="label">{{label}}</h4>
                        <div class="v-radio-content">
                            <template v-for="(item, index) in arr">
                                <span class="select-item"
                                      :class="{'active': check.some(code => code == item.code)}"
                                      @click.stop="fnRadioItem(item)"
                                      :key="index">{{item.name}}</span>
                            </template>
                        </div>
                    </li>
                </template>
                <!-- 单选 end -->
            </ul>

            <footer>
                <div @click="fnClear()">
                    <van-icon name="brush-o" />
                    <span>{{clearText}}</span>
                </div>
                <span @click="fnSubmit()">{{submitText}}</span>
            </footer>
        </div>
    </van-popup>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true
        },
        // 弹窗标题
        title: {
            type: String,
            default: '请选择'
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: true
        },
        // 选择项的label
        label: {
            type: String,
            default: ''
        },
        // 选项
        arr: {
            type: Array,
            default: _ => ([])
        },
        // 选中 code
        check: {
            type: Array,
            default: _ => ([])
        },
        // 操作底部btn后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true
        },
        // 确定的文本
        submitText: {
            type: String,
            default: '确定'
        },
        // 清空的文本
        clearText: {
            type: String,
            default: '清空'
        }
    },
    computed: {
        visible: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            }
        },
    },
    methods: {
        // 关闭组件
        fnColse () {
            this.visible = false
        },
        // 单选item点击
        fnRadioItem (item) {
            let index = this.check.findIndex(code => code == item.code)

            if (index == -1) { // 当前是未选中状态
                // 清空之前的选中
                if (this.check.length > 0) {
                    this.check.splice(0, 1)
                }

                this.check.push(item.code)
            } else {
                this.check.splice(index, 1)
            }
        },
        // 多选item点击
        fnCheckboxItem (item) {
            let index = this.check.findIndex(code => code == item.code)

            if (index == -1) { // 当前是未选中状态
                this.check.push(item.code)
            } else {
                this.check.splice(index, 1)
            }
        },
        // 清空
        fnClear () {
            this.check.length = 0

            this.$emit('btn:click', {
                type: 'clear',
                check: this.check,
                checkItems: []
            })

            this.autoClose && this.fnColse()
        },
        // 确定
        fnSubmit () {
            let checkItems = this.fnGetcheckItems()

            this.$emit('btn:click', {
                type: 'confirm',
                check: this.check,
                checkItems: checkItems
            })

            this.autoClose && this.fnColse()
        },
        // 获取所有选中的item
        fnGetcheckItems () {
            let temp = this.arr.filter(item => {
                return this.check.some(code => code == item.code)
            })

            return temp || []
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

.v-popup-picker-btn {
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    > header {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 60px;
        position: relative;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        line-height: 23px;

        .van-icon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 26px;
            margin: auto;
            width: 15px;
            height: 15px;
            color: #61677a;
        }
    }

    > footer {
        flex-shrink: 0;
        height: 79px;
        display: flex;
        align-items: center;

        > div {
            padding: 0 35px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
            color: #0f1826;

            .van-icon {
                font-size: 24px;
            }
        }

        > span {
            flex: 1;
            height: 48px;
            background: #3385ff;
            border-radius: 24px;
            color: #fff;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    span.select-item {
        font-size: 14px;
        font-weight: 400;
        color: #61677a;
        line-height: 20px;
        background: #f5f7fa;
        border-radius: 4px;
        padding: 8px 15px;
        margin: 0 10px 12px 0;

        &.active {
            background: rgba(51, 133, 255, 0.08);
            color: #3b7ffa;
        }
    }

    ul {
        flex: 1;
        overflow-y: auto;
        margin: 0;
        padding: 0 20px 20px;

        li {
            display: flex;
            flex-direction: column;

            & + li {
                margin-top: 10px;
            }

            > h4 {
                font-size: 16px;
                font-weight: 500;
                color: #0f1826;
                line-height: 23px;
                padding: 8px 0 15px;
                margin: 0;
            }

            .v-radio-content,
            .v-checkbox-content {
                display: flex;
                flex-wrap: wrap;
            }
        }
    }
}
</style>
